<script>
import { mapState } from 'vuex'

export default {
  name: 'areaForm',
  data() {
    return {
      /* 表单数据对象 */
      formData: {
        areaName: '',
        spaceNumber: '',
        areaProportion: '',
        ruleId: '',
        remark: ''
      },
      /* 表单规则对象 */
      formRules: {
        areaName: [
          { required: true, message: '请输入区域名称', trigger: 'blur' }
        ],
        spaceNumber: [
          { required: true, message: '请输入车位数（个）', trigger: 'blur' }

        ],
        areaProportion: [
          { required: true, message: '请输入面积（㎡）', trigger: 'blur' }

        ],
        ruleId: [
          { required: true, message: '请选择关联计费规则', trigger: 'change' }
        ],
        remark: [
          { required: true, message: '请输入备注', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    /* 获取关联计费规则的回调函数 */
    async fetchRuleList() {
      try {
        await this.$store.dispatch('area/fetchRuleList')
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 添加区域的回调函数 */
    async addArea() {
      try {
        const addResult = await this.$store.dispatch('area/addArea', this.formData)
        this.$message.success(addResult)
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 编辑区域的回调函数 */
    async editArea() {
      try {
        delete this.formData.ruleName
        delete this.formData.hoverRuleName
        const updateResult = await this.$store.dispatch('area/updateArea', this.formData)
        this.$message.success(updateResult)
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    findArea(row) {
      this.formData = { ...row }
    },
    /* 用于验证表单的回调函数 */
    async validateForm() {
      return await this.$refs.formRef.validate().catch(error => error)
    },
    /* 用于清空表单的回调函数 */
    resetForm() {
      this.$refs.formRef.resetFields()
    }
  },
  computed: {
    ...mapState('area', ['ruleList'])
  },
  created() {
    this.fetchRuleList()
  }
}
</script>

<template>
  <el-form label-width="110px" :model="formData" :rules="formRules" ref="formRef">
    <el-form-item label="区域名称" prop="areaName">
      <el-input placeholder="请输入区域名称" v-model="formData.areaName"></el-input>
    </el-form-item>
    <el-form-item label="车位数（个）" prop="spaceNumber">
      <el-input placeholder="请输入车位数（个）" v-model="formData.spaceNumber"></el-input>
    </el-form-item>
    <el-form-item label="面积（㎡）" prop="areaProportion">
      <el-input placeholder="请输入面积（㎡）" v-model="formData.areaProportion"></el-input>
    </el-form-item>
    <el-form-item label="关联计费规则" prop="ruleId">
      <el-select value="" placeholder="请选择关联计费规则" v-model="formData.ruleId">
        <el-option v-for="(item) in ruleList" :value="item.id" :label="item.ruleName" :key="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="备注" prop="remark">
      <el-input placeholder="请输入备注" v-model="formData.remark"></el-input>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">
.el-form {
  width: 80%;

  .el-select {
    width: 100%;
  }
}
</style>
